import './index.less'
import React, { Component } from 'react';
import { history } from 'umi'
import Encrypt from '@/utils/encrypt' // 加密文件 获取用户信息
import { Layout, Menu,  Button } from 'antd';
import * as Icon from '@ant-design/icons';
const { Header, Sider, Content } = Layout;
import siderbar from '@/router/siderbar';
const { SubMenu } = Menu;
import {BrowserRouter as Link}  from 'react-router-dom'

class Pages extends Component {
  // 登录验证 是否清除的登录数据
  componentDidMount() {
    const  encrypt = new Encrypt()
    const timer = encrypt.getItem('timer')
    const newTimer = new Date().getTime()/1000/60/60
    if (newTimer - timer > 24) { // 如果登录时间超过24小时 则自动清除登录信息
      this.clearUser()
    } else {
      this.state.username = encrypt.getItem('username')
      const password = encrypt.getItem('password')
      this.state.username && password? history.push('/dashboard') : history.push('/login') // 判断username和password是否有值
    }
  }

  clearUser = () => { // 清除用户
    localStorage.clear()
    history.push('/login')
  }

  // 对左侧菜单栏进行合并
  state = {
    collapsed: false,
    username: ''
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };


  goToRouter = ((path:string) => {
    this.props.history.push(path)
  })

  // 对菜单栏做循环生成
  getMenu = (data:any) => {
    return data.map( (item:any, i:number) => {
      let reactDOM:any = ''
      if (item.meta.icon) {
        reactDOM = React.createElement(Icon[item.meta.icon])
      }
      // const reactDOM = React.createElement(item.meta.icon? item.meta.icon : '')
      if (item.routes) {
        return (<SubMenu key={item.path+i} icon={reactDOM} title={item.meta.title}>
          {this.getMenu(item.routes)}
        </SubMenu>)
      }
      return <Menu.Item key={item.path+i} icon={reactDOM} onClick={() => {this.goToRouter(item.path)}}>
        {item.meta.title}
      </Menu.Item>
    })
  }


  render() {
    return <div className='system-layout'>
      <Layout>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            {this.getMenu(siderbar)}
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? Icon['MenuUnfoldOutlined'] : Icon['MenuFoldOutlined'], {
              className: 'trigger',
              onClick: this.toggle,
            })}
            <div className='userName'>
              <span>你好！{this.state.username}</span>
              <Button type="primary" onClick={this.clearUser}>退出登录</Button>
            </div>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            {this.props.children}
          </Content>
        </Layout>
      </Layout>
    </div>
  }
}

export default Pages
